<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQ操作DOM</title>
		<!-- JS：核心语法+DOM（针对页面操作）+BOM（针对浏览器）
		         学习主体：针对页面操作比较多---DOM操作
				 JQ操作DOM：理解：JQ框架改变页面内容效果
				 js基础可以直接学习、了解函数使用
				 基础函数---事件源之后出现 事件源语法糖中
				html()      作用：增加一个元素，覆盖原有html
				 val()      作用：针对input元素，实现修改文本框内容
				 text()     作用：生成文本内容
		 -->
		 <script src="js/jquery-1.11.1.js"></script>
		 <style>
			 #d1 {
			    width: 200px;
			    height: 200px;
			    background-color: #aaffff; 
			    }
		 </style>
	</head>
	<body>
		<!-- 鼠标点击按钮，然后改变下面产生一行文本 -->
	<button>按钮</button>
	<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Cum temporibus recusandae quaerat incidunt facere consequuntur. In tempore vero non ea consequatur id voluptas ex dolorem sapiente itaque, expedita suscipit architecto!</p >
	<!-- ----------------------------------------------------------------- -->
	<div id="d1"></div> 
	<h3 id="targetText"> 原始文本 </h3> 	
	<!-- ----------------------------------------------------------------- -->
	
	<button id="addTextButton"> 添加文本 </button>
	<input type="button"  value="按钮2"/>
	<input type="text" />
	<script>
		$("button").click(function(){
			/* JQ操作DOM--html()函数使用 */
		$("p").html("<h1>JQ操作DOM-html函数使用</h1>");
		});
		//---------------------------------------------------------------
		/* 练习1：div 200*200 背景颜色自定 鼠标滑过之后，下面的内容修改：<h3>文本修改为自定黄色颜色</h3> */
		$("#d1").mouseenter(function () {
			h1
		            // 修改 h3 标签的内容和颜色
		$("#targetText").html("<h3 style='color: yellow;'>黄色颜色</h3>");
		        });
		//---------------------------------------------------------------
		/* 练习2：按钮 文本框 点击按钮，文本增加一行文本 */
		$("input[type='button']").click(function(){
			// alter("jq选择器是否选中");
			$("input[type='text']").val(("文本框内容修改"))
		});
		/* 利用JQ操作DOM（页面效果）：元素内容操作	（3个函数）
		                                      html 
											  
											 属性操作		（4个函数）
											 样式类名操作	（4个函数）
											 元素样式操作	（5个函数）
											 插入和删除操作	（7个函数）
											 元素遍历操作	（6个函数）
											 JQ动画操作		（7个函数） */
	</script>
	</body>
</html>